<template>
    <h2>注册页面</h2>
    <button @click="TakeLogin">跳转到登录</button>

    <RouterLink to="/Login">登录</RouterLink>

    <table border="1">
        <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info">
                <td>{{item.Sid}}</td>
                <td>{{item.Sname}}</td>
                <td>{{item.Sage}}</td>
                <td><a href="#" @click="EditInfo(item.Sid)">修改</a></td>
            </tr>
        </tbody>
    </table>


</template>

<script setup lang="ts">

    import {useRouter} from 'vue-router'
    //useRouter 路由操作对象的实例
    const router=useRouter();

    //方式一：创建跳转方法 页面会刷新location.href="/Login";
    const TakeLogin=()=>{
        // location.href="/Login";
    //    方式二： 通过路由操作
    router.push("/Login");

       //方式三:通过路由标签完成页面跳转 RouteLink
    }


    const info=[
        {
            Sid:1,
            Sname:"张三",
            Sage:23
        },

        {
            Sid:2,
            Sname:"张三2",
            Sage:29
        },

        {
            Sid:3,
            Sname:"张三3",
            Sage:18
        },
    ]

    //跳转学生信息修改页面
    const EditInfo=(Sid:number)=>{
        router.push(
            {
            //方式一：通过路由地址完成参数传参 path：地址 query：参数
        //     path:"/EditDemo",
        //       query:{
        //               Sid:Sid
        //               }


        //方式二：通过路由名称完成参数传递 name名称 params参数
                name:"EditDemo",
                params:{
                    Sid:Sid
                }
            }
    );
      
    }
</script>



